<template>
  <div class="config-container">
    <a-layout style="min-height: 100vh">
      <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
        <div class="logo">IP CAMERA</div>
        <a-menu
          v-model:selectedKeys="selectedKeys"
          v-model:openKeys="openKeys"
          mode="inline"
          theme="dark"
        >
          <a-menu-item key="preview" @click="$router.push('/')">
            <template #icon>
              <video-camera-outlined />
            </template>
            <span>预览</span>
          </a-menu-item>
          <a-sub-menu key="camera">
            <template #title>
              <span>
                <video-camera-outlined />
                <span>摄像头设置</span>
              </span>
            </template>
            <a-menu-item key="video">
              <router-link to="/config/camera/video">视频参数</router-link>
            </a-menu-item>
            <a-menu-item key="image">
              <router-link to="/config/camera/image">图像参数</router-link>
            </a-menu-item>
            <a-menu-item key="osd">
              <router-link to="/config/camera/osd">OSD设置</router-link>
            </a-menu-item>
          </a-sub-menu>

          <a-sub-menu key="network">
            <template #title>
              <span>
                <global-outlined />
                <span>网络设置</span>
              </span>
            </template>
            <a-menu-item key="basic">
              <router-link to="/config/network/basic">基本设置</router-link>
            </a-menu-item>
          </a-sub-menu>

          <a-sub-menu key="system">
            <template #title>
              <span>
                <setting-outlined />
                <span>系统管理</span>
              </span>
            </template>
            <a-menu-item key="upgrade">
              <router-link to="/config/system/upgrade">系统升级</router-link>
            </a-menu-item>
            <a-menu-item key="user">
              <router-link to="/config/system/user">用户管理</router-link>
            </a-menu-item>
          </a-sub-menu>
        </a-menu>
      </a-layout-sider>

      <a-layout>
        <a-layout-header style="background: #fff; padding: 0">
          <div style="display: flex; align-items: center; height: 100%;">
            <menu-fold-outlined
              v-if="collapsed"
              class="trigger"
              @click="() => (collapsed = !collapsed)"
            />
            <menu-unfold-outlined
              v-else
              class="trigger"
              @click="() => (collapsed = !collapsed)"
            />
          </div>
        </a-layout-header>

        <a-layout-content style="margin: 0 16px">
          <a-breadcrumb style="margin: 16px 0">
            <a-breadcrumb-item>配置</a-breadcrumb-item>
            <a-breadcrumb-item>{{ currentPath }}</a-breadcrumb-item>
          </a-breadcrumb>
          <div class="content-container">
            <router-view />
          </div>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  VideoCameraOutlined,
  CameraOutlined,
  WifiOutlined,
  SettingOutlined,
  GlobalOutlined
} from '@ant-design/icons-vue'

const router = useRouter()
const route = useRoute()
const collapsed = ref(false)
const selectedKeys = ref([])
const openKeys = ref(['camera'])
const currentPath = ref('摄像头设置')

const pathMap = {
  'video': '视频参数',
  'image': '图像参数',
  'osd': 'OSD设置',
  'basic': '基本设置',
  'upgrade': '系统升级',
  'user': '用户管理'
};

watch(
  () => route.path,
  (path) => {
    const key = path.split('/').pop();
    selectedKeys.value = [key];
    const parent = path.split('/')[2];
    openKeys.value = [parent];
    currentPath.value = pathMap[key] || '';
  },
  { immediate: true }
);
</script>

<style scoped>
.config-container {
  height: 100%;
}

.trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

.trigger:hover {
  color: #1890ff;
}

.home-link {
  color: rgba(0, 0, 0, 0.85);
  text-decoration: none;
  transition: color 0.3s;
}

.home-link:hover {
  color: #1890ff;
}

.logo {
  height: 32px;
  margin: 16px;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  line-height: 32px;
  text-align: center;
  white-space: nowrap;
  background: transparent;
}

.content-container {
  padding: 24px;
  background: #fff;
  min-height: 360px;
}

:deep(.ant-layout-sider-children) {
  display: flex;
  flex-direction: column;
}

:deep(.ant-menu) {
  flex: 1;
}
</style>